<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,   user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tabbar.html -->



    <!--App自定义的css-->
    <!-- <link rel="stylesheet" type="text/css" href="../css/app.css"/> -->


    <!--标准mui.css-->
    <!-- 第一步引入mui css -->
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="./assets/mui/css/icons-extra.css">
    <link rel="stylesheet" href="./assets/mui/fonts/mui-icons-extra.ttf">
    <link rel="stylesheet" href="./common.css">


    <style>
        #sizeBox.mui-card-link {
            flex-wrap: wrap;
            /* min-height: 44px;               */
            height: auto;
        }


        #sizeBox span {
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            display: inline-block;
            margin-bottom: 10px;
            margin-right: 10px;
            border: 1px solid #333;
            margin-top: 10px 0;

        }

        .countBox {
            /* padding-top: 10px;
                padding-bottom: 10px;
                margin-bottom: 10px; */
            /* margin: 0 10px; */
        }

        .mui-numbox {
            height: 40px;
            margin-top: 10px;
        }

        #mui-input-numbox {
            height: 40px;
        }

        .footer {
            /* display: flex; */
            position: fixed;
            bottom: 55px;
            width: 100%;

        }

        .footer button {
            width: 50%;
            float: left;
            /* flex: 1; */
            height: 44px;
            border-radius: none;
            box-sizing: border-box;

        }

        .active {
           background-color: greenyellow;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-search mui-icon mui-icon-search  mui-pull-right"></a>
        <h1 class="mui-title">乐淘云购详情页面</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">9</span></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="user.html">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <div class="mui-content">

        <div class="mui-card" id='card'>
            <!-- <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./images/detail.jpg)">
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">

                    <p style="color: #333;">
                        【莹恋】MIZUNO美津浓V1GA159002乒乓球鞋男鞋女鞋室内综合训练鞋
                    </p>
                    <p style="color: #333;"> 价格： <span class="new"
                            style="color: red; font-size: 20px; font-weight: 900;">¥112</span> &nbsp; &nbsp; <span
                            class="old">¥398</span> </p>
                </div>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link" style="color: #333;" id='sizeBox'>尺寸：
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>


                </a>

            </div>
            <div class="mui-card-footer  countBox">
                <a href="#" class="mui-card-link mui-content-padded" style="color: #333;">

                    数量：
                    <div class="mui-numbox">
                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                        <input class="mui-input-numbox" type="number" id='mui-input-numbox'>
                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                    </div>
                </a>


            </div> -->
        </div>


        <div class="footer">
            <button type="button" class="mui-btn mui-btn-primary">查看购物车</button>
            <button type="button" class="mui-btn mui-btn-success" >加入购物车</button>

        </div>

    </div>


<!-- 

    brandId: 2
id: 6
num: 44
oldPrice: 342
pic: Array(1)
0:
id: 6
picAddr: "/mobile/images/detail.jpg"
picName: "/mobile/images/detail.jpg"
productId: 6
__proto__: Object
length: 1
__proto__: Array(0)
price: 112
proDesc: "描述123123"
proName: "【莹恋】MIZUNO美津浓V1GA159002乒乓球鞋男鞋女鞋室内综合训练鞋"
size: "35-56"
statu: 1
updateTime: "2017-01-04T16:48:05.000Z" -->

<script type="text/html" id='tmp'>

    <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url('{{ pic[0].picAddr}}')">
    </div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">

            <p style="color: #333;">
               {{proName}}
            </p>
            <p style="color: #333;"> 价格： <span class="new"
                    style="color: red; font-size: 20px; font-weight: 900;">¥{{price}}</span> &nbsp; &nbsp; <span
                    class="old">¥{{oldPrice}}</span> </p>
        </div>
    </div>
    <div class="mui-card-footer">
        <a class="mui-card-link" style="color: #333;" id='sizeBox' href="javascript:;">尺寸：

            {{each size}}
            <span class="sizeNum  {{$index==0?'active':''}}" >{{$value}}</span>
           
           {{/each}}
            剩余数量：{{num}}

        </a>

    </div>
    <div class="mui-card-footer  countBox">
        <a href="#" class="mui-card-link mui-content-padded" style="color: #333;">

            数量：
            <div class="mui-numbox">
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input class="mui-input-numbox" type="number"  id='mui-input-numbox'  value="1">
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
        </a>


    </div>

</script>


</body>
<script src="./assets/mui/js/mui.min.js"></script>

<!-- 移动端的jq -->
<script src="./assets/zepto/zepto.min.js"></script>
<!-- 模块引擎 -->
<script src="./assets/artTemplate/template-web.js"></script>
<script src="./common.js"></script>
<script src="./js/detail.js"></script>
<!-- <script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script> -->



<script>




</script>

</html>